//详情弹窗
<template>
  <el-dialog
    :title="title"
    custom-class="dialogStyle1 detailsPopup"
    :close-on-click-modal="false"
    :append-to-body="true"
    :visible.sync="show"
    @open="open"
  >
    <el-form
      ref="form"
      :hide-required-asterisk="false"
      :model="form"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item label="机构名称:" prop="orgname">
        <el-input v-model="form.orgname" placeholder="输入机构名称" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="机构编号:" prop="orgcode">
        <el-input v-model="form.orgcode" placeholder="输入机构编号" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="机构行政区划:" prop="orgaddr">
        <el-input v-model="form.orgaddr" placeholder="输入机构行政区划" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="机构所在区域:" prop="orgAreaId">
        <el-select v-model="form.orgAreaId" filterable class="search-btn" :disabled="disabled">
          <el-option
            v-for="item in regionData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="机构等级:">
        <el-select v-model="form.orglevel" filterable class="search-btn" :disabled="disabled">
          <el-option
            v-for="item in orglevel"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="机构等次:">
        <el-select v-model="form.orghierarchy" filterable class="search-btn" :disabled="disabled">
          <el-option
            v-for="item in orghierarchy"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="机构性质:">
        <el-select v-model="form.orgproperty" filterable class="search-btn" :disabled="disabled">
          <el-option
            v-for="item in orgproperty"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="接入方式:">
        <el-select v-model="form.accessmethod" filterable class="search-btn" :disabled="disabled">
          <el-option
            v-for="item in accessmethod"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="有效时间:">
        <el-date-picker
          :disabled="disabled"
          class="search-btn"
          v-model="form.validtime"
          type="date"
          value-format="yyyy-MM-dd"
          :clearable="false"
        ></el-date-picker>
      </el-form-item>
      <el-form-item style="text-align:center;" label-width="0">
        <el-button type="success" @click="onSubmit('form')" v-if="type=='register'">注册机构</el-button>
        <el-button type="success" @click="changeSubmit('form')" v-if="type=='edit'">确认修改</el-button>
        <el-button @click="logoutSubmit" v-if="type=='edit'">注销机构</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import store from "@/store";
import { splitTime, notify } from "@/utils/index";
import { mapGetters } from "vuex";
import { registerORG, changeORG, logoutORG } from "@/api/org";
export default {
  data() {
    return {
      title: "",
      type: "register",
      showForm: false,
      disabled: false,
      show: false,
      form: {
        orgname: "",
        orgcode: "",
        orgAreaId: 99,
        orgaddr: "",
        orglevel: "",
        orghierarchy: "",
        orgproperty: "",
        accessmethod: "",
        validtime: ""
      },
      rules: {
        orgname: [
          { required: true, message: "请输入机构名称", trigger: "blur" }
        ],
        orgcode: [
          { required: true, message: "请输入机构编码", trigger: "blur" }
        ],
        orgAreaId: [
          { required: true, message: "请输入输入行政区号", trigger: "blur" }
        ],
        orgaddr: [
          { required: true, message: "请输入机构行政区划", trigger: "blur" }
        ]
      }
    };
  },
  computed: {
    ...mapGetters("parameter/", ["orglevel"]),
    ...mapGetters("parameter/", ["orghierarchy"]),
    ...mapGetters("parameter/", ["orgproperty"]),
    ...mapGetters("parameter/", ["accessmethod"]),
    regionData() {
      let data = store.getters["parameter/regionData"].map(item => {
        return {
          label: item.name,
          value: item.value
        };
      });
      data.unshift({ label: "阿坝州", value: 99 });
      return data;
    }
  },
  methods: {
    //打开弹框
    open() {
      if (this.type == "register") {
        this.resetForm();
      }
      this.disabled = this.type == "look" ? true : false;
      this.$nextTick(() => {
        this.$refs.form.clearValidate();
      });
    },
    //重置表单
    resetForm() {
      this.form = {
        orgname: "",
        orgcode: "",
        orgAreaId: 99,
        orgaddr: "",
        orglevel: "0",
        orghierarchy: "3",
        orgproperty: "61",
        accessmethod: "01",
        validtime:
          new Date().getFullYear() +
          "-" +
          (new Date().getMonth() + 1) +
          "-" +
          new Date().getDate()
      };
    },
    // 提交表单
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.REGISTER_ORG();
        } else {
          return false;
        }
      });
    },
    //注册机构
    REGISTER_ORG() {
      registerORG(this.form)
        .then(res => {
          if (res.code == 10000) {
            notify(res.message);
            this.$emit("success");
          } else {
            notify(res.result, "error", "注册失败");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //修改机构
    changeSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.CHANGE_ORG();
        } else {
          return false;
        }
      });
    },
    //修改机构
    CHANGE_ORG() {
      changeORG(this.form)
        .then(res => {
          if (res.code == 10000) {
            notify(res.message);
            this.$emit("success");
          } else {
            notify(res.result, "error", "修改失败");
          }
        })
        .catch(err => {
          success;
          console.log(err);
        });
    },
    //注销机构
    logoutSubmit() {
      this.$prompt("请输入注销指令", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(({ value }) => {
          let data={
            id: this.form.id,
            orgname: this.form.orgname,
            orgcode: this.form.orgcode,
            valid: 0,
            appSecret:value,
          };
          logoutORG(data).then(res => {
            if (res.code == 10000) {
              this.show = false;
              notify(res.message);
              this.$emit("success");
            } else {
              notify(res.result, "error", "注销失败");
            }
          });
        })
        .catch(() => {});
    },
    time(val) {
      return val ? val : "无";
    }
  }
};
</script>
<style lang='scss' scoped>
@import "~@/assets/styles/dialog.scss";
/deep/ .detailsPopup {
  width: 750px;
  .el-form-item.is-required:not(.is-no-asterisk)
    .el-form-item__label-wrap
    > .el-form-item__label:before,
  .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
    display: none;
  }
}
</style>